<script setup lang="ts">
type Prop = {
  title?: string;
};
defineProps<Prop>();
</script>

<template>
  <div class="src-wrapper">
    <el-affix :offset="80" target=".src-wrapper">
      <div class="src-details-header">
        <span class="src-details-title">
          <slot name="title">
            {{ title }}
          </slot>
        </span>
        <slot name="actions" />
      </div>
    </el-affix>
    <div>
      <slot />
    </div>
  </div>
</template>
<style lang="scss">
.src-wrapper {
  background-color: var(--el-bg-color);
}

.src-details-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: var(--el-bg-color);
}

.src-details-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}
</style>
